<template>
  <!-- 导航部分开始 -->
  <!--    <el-row style="margin-top: 10px;">-->
  <!--        <el-col :span="24">-->
  <!--            <el-breadcrumb separator="/">-->
  <!--                <el-breadcrumb-item>首页</el-breadcrumb-item>-->
  <!--                <el-breadcrumb-item>设备类型管理</el-breadcrumb-item>-->
  <!--            </el-breadcrumb>-->
  <!--        </el-col>-->
  <!--    </el-row>-->
  <!-- 导航部分结束 -->
  <!-- 搜索栏部分开始 -->
  <!--<el-row style="margin-top: 10px;">-->
  <!--    <el-col :span="24">-->
  <!--        &lt;!&ndash; model 绑定表单数据 &ndash;&gt;-->
  <!--        <el-form :inline="true" :model="queryMachineryType" class="demo-form-inline">-->
  <!--            <el-form-item label="类型名称">-->
  <!--                <el-input v-model="queryMachineryType.machineryTypeName" placeholder="请输入类型名称"/>-->
  <!--            </el-form-item>-->
  <!--            <el-form-item label="是否启用">-->
  <!--                <el-select-->
  <!--                    style="width: 150px"-->
  <!--                    v-model="queryMachineryType.enableStatus"-->
  <!--                    placeholder="请选择项目类型"-->
  <!--                >-->
  <!--                    <el-option value="" label="全部"/>-->
  <!--                    <el-option value="1" label="是"/>-->
  <!--                    <el-option value="2" label="否"/>-->
  <!--                </el-select>-->
  <!--            </el-form-item>-->
  <!--            <el-form-item>-->
  <!--                <el-button type="primary" @click="loadMachineryType">搜索</el-button>-->
  <!--                <el-button @click="resetForm">重置</el-button>-->
  <!--            </el-form-item>-->
  <!--        </el-form>-->
  <!--    </el-col>-->
  <!--</el-row>-->
  <!-- 搜索栏部分结束 -->

  <!-- 工具栏部分开始 -->
  <el-row style="margin-top: 10px;">
      <el-col :span="24">
  <!--        <el-tooltip-->
  <!--            class="box-item"-->
  <!--            effect="dark"-->
  <!--            content="新增点检保养计划"-->
  <!--            placement="top-start"-->
  <!--        >-->
  <!--            <el-button @click="toAddSubject" type="primary">-->
  <!--                <el-icon>-->
  <!--                    <Plus/>-->
  <!--                </el-icon>-->
  <!--            </el-button>-->
  <!--        </el-tooltip>-->
  <!--        <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">-->
  <!--            <el-icon>-->
  <!--                <EditPen/>-->
  <!--            </el-icon>-->
  <!--        </el-button>-->
  <!--        <el-popconfirm confirm-button-text="是" cancel-button-text="否"-->
  <!--                       @confirm="deleteBtnHandler" title="您确定要删除选中的点检保养计划吗？">-->
  <!--            <template #reference>-->
  <!--                <el-button :disabled="deleteBtnDisabled" type="primary">-->
  <!--                    <el-icon>-->
  <!--                        <Minus/>-->
  <!--                    </el-icon>-->
  <!--                </el-button>-->
  <!--            </template>-->
  <!--        </el-popconfirm>-->
          <el-button @click="exportMachineryType" type="primary">
              <el-icon>
                  <Download/>
              </el-icon>
          </el-button>
      </el-col>
  </el-row>
  <!-- 工具栏部分结束 -->
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="menuTable"
                      lazy
                      :load="loadMachineryType"
                      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                      row-key="machineryTypeId"
                      :data="machineryTypes" border :stripe="true"
                      style="width: 95%">
                <!--<el-table-column prop="machineryTypeId" label="#"/>-->
                <el-table-column prop="machineryTypeCode" label="设备类型编码"/>
                <el-table-column prop="machineryTypeName" label="设备类型名称"/>
                <el-table-column prop="remark" label="备注"/>
                <!--<el-table-column prop="deptEmail" label="邮箱"/>-->
                <!--<el-table-column prop="deptOrder" label="排序"/>-->
                <el-table-column prop="enableStatus" label="是否启用">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.enableStatus == 1">是</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.enableStatus == 2">否</el-tag>
                    </template>
                </el-table-column>
                <!-- 行工具栏 -->
                <el-table-column width="200" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toAddMachineryType(scope.row.machineryTypeId)" size="small">添加
                        </el-button>
                        <el-button type="primary" @click="toEditMachineryType(scope.row.machineryTypeId)" size="small">编辑
                        </el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteMachineryType(scope.row.machineryTypeId)"
                                       title="您确定要删除这个设备类型吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->
  <!-- 分页部分开始 -->
  <!--<el-row style="margin-top: 10px;">-->
  <!--    <el-col :span="24">-->
  <!--        <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit" :total="total"/>-->
  <!--    </el-col>-->
  <!--</el-row>-->
  <!-- 分页部分结束 -->

  <!-- 使用子组件 -->
    <MachineryTypeAddWin :visible="addMachineryTypeVisble" :machineryTypeNames="machineryTypeNames" :machineryTypeId="addMachineryTypeId" @optionCompleted="addOptionCompleted"/>
  <MachineryTypeEditWin :visible="editMachineryTypeVisble" :machineryTypeNames="machineryTypeNames" :machineryTypeId="editMachineryTypeId" @optionCompleted="editOptionCompleted"/>
  <!--  <SubjectItem :visible="showSubjectVisble" :toolId="showToolId" @optionCompleted="showOptionCompleted"/>-->
</template>

<script>
import MachineryTypeAddWin from './machineryType-add-win.vue';
import MachineryTypeEditWin from './machineryType-edit-win.vue';
// import SubjectItem from './subject-item-win.vue';
// 引入api
import machineryTypeRequest from '../../../api/machineryType.js';
import config from "@/util/config.js";
// import DeptRequest from "@/api/dept.js";

export default {
    components: {
        MachineryTypeAddWin,
        MachineryTypeEditWin,
        // ToolItem
    },
    name: "machineryType.vue",
    data() {
        return {
            queryMachineryType: {parentTypeId: 0},// 绑定查询条件
            createTimes: [],// 绑定搜索栏中的时间范围
            machineryTypes: [],// 列表数据
            machineryTypeNames: [],
            currentPage: 1,// 当前页码
            limit: 10,// 每页大小
            total: 0,// 总条数
            addMachineryTypeVisble: false,// 新增设备类型的弹窗是否显示
            addMachineryTypeId: -1,

            editMachineryTypeVisble: false,// 标记是否显示编辑设备类型的弹窗
            editMachineryTypeId: -1,// 编辑设备类型的id

            showMachineryTypeVisble: false,// 标记是否显示设备类型项的弹窗
            currentMachineryTypeId: -1,// 当前设备类型的type

            showMachineryTypeId: -1,

            editBtnDisabled: true,
            deleteBtnDisabled: true
        }
    }, methods: {
        exportMachineryType() {
            // 超链接下载导出文件
            // 拼接请求参数
            let url = config.dvUrl + "/dv/machineryType/export?a=1";
            for (let paramName in this.queryMachineryType) {
                if (this.queryMachineryType[paramName]) {
                    url += "&" + paramName + "=" + this.queryMachineryType[paramName];
                }
            }
            // url += "&page=" + this.currentPage + "&limit=" + this.limit;
            //超链接请求
            location.href = url;
        },
        // 重置查询条件表单
        resetForm() {
            this.queryMachineryType = {};
        },
        /**
         * 行删除按钮事件
         * @param dictId
         */
        deleteMachineryType(machineryTypeId) {
            machineryTypeRequest.deleteMachineryType(machineryTypeId, res => {
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '删除设备类型成功!'
                    });
                }else {
                    this.$message({
                        type: 'error',
                        message: '设备类型下已配置了设备，不能删除！!'
                    });
                }
                this.loadMachineryType();
            });
        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler() {
            let editSubject = this.$refs.subjectTaebl.getSelectionRows()[0];
            if (editSubject != undefined) {
                this.editSubjectId = editSubject.subjectId;
                this.editSubjectVisble = true;
            } else {
                this.$message({
                    type: 'warning',
                    message: '请选择要编辑的设备类型!'
                });
            }
        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange() {
            let selectionRows = this.$refs.subjectTaebl.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 监听编辑设备类型的子组件操作完成的事件
         */
        editOptionCompleted() {
            // 将弹窗设置为false
            this.editMachineryTypeVisble = false;
            // 重新加载列表
            this.loadMachineryType();
        },
        /**
         * 行编辑按钮事件
         */
        toEditMachineryType(machineryTypeId) {
            // 将传入的subjectId设置到editsubjectId
            this.editMachineryTypeId = machineryTypeId;
            // 弹出编辑窗体
            this.editMachineryTypeVisble = true;
        },
        /**
         * 工具栏的新增设备类型按钮事件
         */
        toAddMachineryType(machineryTypeId) {
            this.addMachineryTypeId = machineryTypeId;
            // 弹窗 addSubjectVisble设置为true
            this.addMachineryTypeVisble = true;
        },
        /**
         * 监听添加设备类型的子组件操作完成的事件
         */
        addOptionCompleted() {
            // 将弹窗设置为false
            this.addMachineryTypeVisble = false;
            // 重新加载列表
            this.loadMachineryType();
        },
        /**
         * 加载设备类型信息
         */
        queryMachineryTypeNames() {
            machineryTypeRequest.queryMachineryTypeNames(res => {
                this.machineryTypeNames = res.data;
            })
        },
        loadMachineryType(row, node, resolve) {
            // console(row);
            //  设置父节点的id
            if (row == undefined) {
                // 查询第一级部门
                this.queryMachineryType.parentTypeId = 0;// 设置父节点编号为0
                machineryTypeRequest.loadMachineryType(this.queryMachineryType, res => {
                    this.machineryTypes = res.data;
                });
            } else {
                // 设置父级部门为当前行的部门编号
                this.queryMachineryType.parentTypeId = row.machineryTypeId;
                if (this.queryMachineryType.parentTypeId == undefined) {
                    this.queryMachineryType.parentTypeId = '';
                }
                machineryTypeRequest.loadMachineryType(this.queryMachineryType, res => {
                    // 查询到的数据使用resolve函数进行处理
                    resolve(res.data);

                });
            }
        },
    },mounted() {
        this.loadMachineryType();
        this.queryMachineryTypeNames();
        // this.queryToolTypeNames();
    }
}
</script>

<style scoped>

</style>